baubs git
Commit ca3d18fb2cab60075d2bfb471d7e5f4f18df296c
Parents : 7b5cf26
Author : Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date : 2025-12-13T13:54:04+01:00
feature: Add center pattern button to canvas controls
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes
Diff
diff --git a/src/components/PatternCanvas.tsx b/src/components/PatternCanvas.tsx
index e7367ed..e47b035 100644
--- a/src/components/PatternCanvas.tsx
+++ b/src/components/PatternCanvas.tsx
@@ -4,7 +4,7 @@ import { useMachineStore } from '../stores/useMachineStore';
import { usePatternStore } from '../stores/usePatternStore';
import { Stage, Layer, Group } from 'react-konva';
import Konva from 'konva';
-import { PlusIcon, MinusIcon, ArrowPathIcon, LockClosedIcon, PhotoIcon } from '@heroicons/react/24/solid';
+import { PlusIcon, MinusIcon, ArrowPathIcon, LockClosedIcon, PhotoIcon, ArrowsPointingInIcon } from '@heroicons/react/24/solid';
import type { PesPatternData } from '../utils/pystitchConverter';
import { calculateInitialScale } from '../utils/konvaRenderers';
import { Grid, Origin, Hoop, Stitches, PatternBounds, CurrentPosition } from './KonvaComponents';
@@ -191,6 +191,17 @@ export function PatternCanvas() {
setStagePos({ x: containerSize.width / 2, y: containerSize.height / 2 });
}, [containerSize]);
+ const handleCenterPattern = useCallback(() => {
+ if (!pesData) return;
+
+ const { bounds } = pesData;
+ const centerOffsetX = -(bounds.minX + bounds.maxX) / 2;
+ const centerOffsetY = -(bounds.minY + bounds.maxY) / 2;
+
+ setLocalPatternOffset({ x: centerOffsetX, y: centerOffsetY });
+ setPatternOffset(centerOffsetX, centerOffsetY);
+ }, [pesData, setPatternOffset]);
+
// Pattern drag handlers
const handlePatternDragEnd = useCallback((e: Konva.KonvaEventObject<DragEvent>) => {
const newOffset = {
@@ -377,6 +388,9 @@ export function PatternCanvas() {
{/* Zoom Controls Overlay */}
<div className="absolute bottom-2 sm:bottom-5 right-2 sm:right-5 flex gap-1.5 sm:gap-2 items-center bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg shadow-lg z-10">
+ <button className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-blue-600 hover:text-white hover:border-blue-600 dark:hover:border-blue-600 hover:shadow-md hover:shadow-blue-600/30 disabled:opacity-50 disabled:cursor-not-allowed" onClick={handleCenterPattern} disabled={!pesData || patternUploaded || isUploading} title="Center Pattern in Hoop">
+ <ArrowsPointingInIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
+ </button>
<button className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-blue-600 hover:text-white hover:border-blue-600 dark:hover:border-blue-600 hover:shadow-md hover:shadow-blue-600/30 disabled:opacity-50 disabled:cursor-not-allowed" onClick={handleZoomIn} title="Zoom In">
<PlusIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
</button>
Served by rngit 1.3.3 - Generated in 0.03s